<template>
  <div class="pos">
    <div>
        <el-row class="row-list">
            <el-col :span='7' class="order-list">
            我是订单栏
            <el-tabs>
      <el-tab-pane label="点餐">
       点餐   
        <el-table :data="tableData" border show-summary style="width: 100%" >
    <el-table-column prop="goodsName" label="商品"  ></el-table-column>
    <el-table-column prop="count" label="量" width="50"></el-table-column>
    <el-table-column prop="price" label="金额" width="70"></el-table-column>
    <el-table-column  label="操作" width="100" fixed="right">
    </el-table-column>
</el-table>
      </el-tab-pane>
      <el-tab-pane label="挂单">
      挂单
      </el-tab-pane>
      <el-tab-pane label="外卖">
      外卖
     </el-tab-pane>
</el-tabs>
            </el-col>
            <!--商品展示-->
            <el-col :span="17">
             我是产品栏
            </el-col>
        </el-row>
    </div> 
  </div>
</template>

<script>
export default {
  name: 'Pos',
  mounted:function(){
      var orderHeight=document.body.clientHeight;
      document.getElementById("order-list").style.height=orderHeight+'px';
  },
  tableData: [{
          goodsName: '可口可乐',
          price: 8,
          count:1
        }, {
          goodsName: '香辣鸡腿堡',
          price: 15,
          count:1
        }, {
          goodsName: '爱心薯条',
          price: 8,
          count:1
        }, {
          goodsName: '甜筒',
          price: 8,
          count:1
        }]
} 
</script>

<style scoped>
.pos{
  height: 100%;
}
.order-list{
  background: grey ;

}

.row-list{
  height: 100% ;
}
</style>